<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: aqua">
        <h2 style="text-align: center">
          TMS智慧物流管理系统
          <el-button
            style="width: 120px; float: right; margin-top: 10px"
            @click="tui"
            type="success"
            >退出登录</el-button
          >
        </h2>
      </el-header>

      <el-container>
        <el-aside>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="route.path"
            text-color="#fff"
            router
          >
            <menu-item
              v-for="(item, index) in TmeenMenuList"
              :key="index"
              :item="item"
              :index="index.toString()"
            />
          </el-menu>

          <!--  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        :default-active="route.path" text-color="#fff" router>

                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span>基础</span>
                            </template>
                            <el-menu-item index="VehicleShow">车辆管理</el-menu-item>
                            <el-menu-item index="OwnerFoundationShow">货主管理</el-menu-item>
                            <el-menu-item index="OutSourcingShow">外协单位管理</el-menu-item>
                            <el-menu-item index="FuelcostsShow">油费管理</el-menu-item>
                            <el-menu-item index="FoundationShow">线路管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span>人事</span>
                            </template>
                            <el-menu-item index="2-1">人事看板</el-menu-item>
                            <el-menu-item index="Personnellist">员工登记</el-menu-item>
                            <el-menu-item index="EntryList">入职办理</el-menu-item>
                            <el-menu-item index="ResignList">离职办理</el-menu-item>
                            <el-menu-item index="RegularizationList">转正办理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span>合同</span>
                            </template>
                            <el-menu-item index="3-1" @click="router.push('/OwnerList')">货主合同管理</el-menu-item>
                            <el-menu-item index="3-2" @click="router.push('/CarrierList')">承运合同管理</el-menu-item>
                            <el-menu-item index="3-3" @click="router.push('/OpponentList')">通用合同管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span>结算</span>
                            </template>
                            <el-menu-item index="4-1" @click="navTo('SettlementList')">应收费用管理</el-menu-item>
                            <el-menu-item index="4-2" @click="navTo('FeesPayableList')">应付费用管理</el-menu-item>
                            <el-menu-item index="4-3" @click="navTo('InvoiceList')">进项发票管理</el-menu-item>
                            <el-menu-item index="4-4" @click="navTo('OutputInvoicesList')">销项发票管理</el-menu-item>
                            <el-menu-item index="4-5" @click="navTo('PaymentManageList')">付款管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span>物资</span>
                            </template>
                            <el-menu-item index="PurchasingList">物资采购</el-menu-item>
                            <el-menu-item index="DePutInStorageList">入库管理</el-menu-item>
                            <el-menu-item index="ReceiveList">物资领用</el-menu-item>
                            <el-menu-item index="StatisticsList">物资统计</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="6">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span>维护</span>
                            </template>
                            <el-menu-item index="/RepairShow">维修记录</el-menu-item>
                            <el-menu-item index="/MaintenanceseShow">保养记录</el-menu-item>
                            <el-menu-item index="/IllegalShow">违章记录</el-menu-item>
                            <el-menu-item index="/AccidentShow">事故记录</el-menu-item>
                            <el-menu-item index="/TyreShwo">轮胎使用记录</el-menu-item>
                            <el-menu-item index="/ExpensesShow">费用记录</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="7">
                            <template #title>
                                <el-icon>
                                    <House />
                                </el-icon>
                                <span>跟踪</span>
                            </template>
                            <el-menu-item index="OwnerContractTraceShow">货主合同跟踪</el-menu-item>
                            <el-menu-item index="7-2">承运合同跟踪</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="8">
                            <template #title>
                                <el-icon>
                                    <List />
                                </el-icon>
                                <span>审批</span>
                            </template>
                            <el-menu-item index="/OwnerApproval">货主合同审批</el-menu-item>
                            <el-menu-item index="8-2">承运合同审批</el-menu-item>
                            <el-menu-item index="8-3">通用合同审批</el-menu-item>
                            <el-menu-item index="/PurchasingApproval">物资采购审批</el-menu-item>
                            <el-menu-item index="8-5">物资领用审批</el-menu-item>
                            <el-menu-item index="8-6">付款审批</el-menu-item>
                            <el-menu-item index="8-7">入职审批</el-menu-item>
                            <el-menu-item index="8-8">离职审批</el-menu-item>
                            <el-menu-item index="8-9">转正审批</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="9">
                            <template #title>
                                <el-icon>
                                    <Setting />
                                </el-icon>
                                <span>设置</span>
                            </template>
                            <el-menu-item index="UserAdd">员工用户创建</el-menu-item>
                            <el-menu-item index="UserList">用户查询显示</el-menu-item>
                            <el-menu-item index="UserSelect">用户select</el-menu-item>
                            <el-menu-item index="RoleAdd">角色添加</el-menu-item>
                            <el-menu-item index="RoleList">角色列表</el-menu-item>
                            <el-menu-item index="MenuAdd">菜单添加</el-menu-item>
                            <el-menu-item index="RoleMenuList">角色菜单添加</el-menu-item>
                        </el-sub-menu>
                    </el-menu> -->
        </el-aside>
        <el-main style="width: 100%">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  List,
  House,
} from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import { useRouter, RouterView, useRoute } from "vue-router";
import axios from "axios";
const router = useRouter();
const route = useRoute();

const navTo = (name: string) => {
  router.push({ name: name });
};

import MenuItem from "@/components/MenuItem.vue";
import { ElMessage, ElMessageBox } from "element-plus";
//获取用户名与用户编号
/*const Userinfo = reactive({
    Mneun: localStorage.getItem("uanme"),
    Uid: localStorage.getItem("Uid")
})*/
//生命函数钩函数
onMounted(() => {
  GetAllTmeenMenuList();
});
//
const TmeenMenuList = ref([]);
const GetAllTmeenMenuList = () => {
  axios
    .get("http://47.96.109.219:5202/api/Menu/MenuTreeShowByRoleId")
    .then((res) => {
      console.log(res);
      TmeenMenuList.value = res.data.data;
      console.log(res.data.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
const tui = () => {
  ElMessageBox.confirm("是否退出本次登录?", "Warning", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  })
    .then(() => {
      router.push("/");
    })
    .catch(() => {});
};
</script>

<style>
html {
  height: 100%;
}
body {
  background-image: url(http://47.96.140.177:8000/empread/Imgs/%E9%A3%8E%E6%99%AF03.jpg);
}
.el-header {
  background-color: aqua;
  color: blue;
  height: 60px;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  width: 200px;
  min-height: calc(100vh - 60px);
}
</style>
